<template>
  <div>
      <div class="base">
          <course-base></course-base>
          <div class="cover" id="basecover" ref="basecover" ></div>
      </div>
      <div class="info">
          <course-info></course-info>
          <course-eidtor></course-eidtor>
           <div class="cover" v-show="viewFlag"></div>
      </div>
      
  </div>
</template>

<script>
import courseBase from './child/courseBase'
import courseInfo from './child/courseInfo'
import courseEidtor from './child/courseEdit'
export default {
  name: 'Vuepro2209Index',
  components:{
    courseBase,
    courseInfo,
    courseEidtor
  },
  data() {
    return {
      viewFlag:true
    };
  },
  created(){
    // 点击保存打开遮罩
    this.$bus.$on("sendCover",()=>{
        this.$nextTick(()=>{
              this.$refs.basecover.style.display="block"; 
        })
    })
  },
  watch:{
   
  },
  mounted() {
    // 如果点击编辑 
      if(!this.viewFlag&&this.$route.query.sta=="编辑"){
           this.$refs.basecover.style.display="none";   
      }else if(this.viewFlag){ //点击添加
          this.$refs.basecover.style.display="none";   
      }
  },

  methods: {
    
  },
};
</script>
<style lang="less">
    .base{
      position:relative;
      .cover{
        position:absolute;
        width:100%;
        height:520px;
        background:rgba(0,0,0,0.5);
        left:0;
        top:0;
         z-index:999;
      }
    }
    .info{
      position:relative;
       .cover{
        position:absolute;
        width:100%;
        height:800px;
        background:rgba(0,0,0,0.5);
        left:0;
        top:0;
        z-index:999;
      }
    }
</style>
